<template>
  <!-- <div>用户列表（编辑角色-就会带出权限， 其他个人信息，管理用户还是，普通用户等）</div> -->

  <ProTable
    :columns="columns"
    :data-source="activities"
    :loading="isFetching"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <template #extraL>
      <a-button
        type="primary"
        @click="handleEdit()"
      >
        新增
      </a-button>
      <a-button
      class="mr10"
      type="primary"
      @click="reLoad()"
    >
      刷新
    </a-button>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'avatar'">
        <img
          style="width: 50px; height: 50px; border-radius: 50%"
          :src="record.avatar"
          alt=""
        />
      </template>
      <template v-if="column.dataIndex === 'action'">
        <span>
          <a @click="handleEditPassword(record)">修改密码</a>

          <a-divider type="vertical" />
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm
            class="gap-popconfirm"
            title="确定删除吗？"
            ok-text="确认"
            cancel-text="取消"
            @confirm="handleDel(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </template>
  </ProTable>
  <adminForm
    ref="adminFormEle"
    @adminReload="adminReload"
  />
  <adminPassword
    ref="adminPasswordEle"
    @adminReload="adminReload"
  />
</template>
<script setup>
  import adminPassword from './adminPassword.vue'
  import adminForm from './adminForm.vue'
  import { adminList, adminDel, adminUpdate, adminAdd } from '@/api/index.js'
  import Collect from 'collect.js'
  import { message } from 'ant-design-vue'

  import { ref, reactive, onMounted, nextTick, toRefs } from 'vue'
  import { useRouter } from 'vue-router'

  const router = useRouter()
  const activities = ref([])
  const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0
  })
  const adminFormEle = ref(null)

  const selectUser = ref({})
  const columns = [
    { admin_id: 'ID' },
    { avatar: '头像' },

    { account: '用户名' },
    { phone: '手机号' },
    { admin_name: '昵称' },
    { email: '邮箱' },

    { created_at: '创建时间' },

    {
      action: {
        title: '操作',
        width: '90px'
      }
    }
  ]

  

  const getList = () => {
    adminList({
      page: pagination.current,
      pageSize: pagination.pageSize
    })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
        activities.value = res.data
        pagination.total = res.total
      })
      .catch((err) => {
        console.log(err)
      })
  }
  const handleTableChange = ({ current, pageSize }) => {
    pagination.current = current
    pagination.pageSize = pageSize
    getList()
  }
  const handleDel = (row) => {
    adminDel({ admin_id: row.admin_id })
      .then((res) => {
        if(res.errorCode){
        message.error(res.msg||'操作失败')
        return
      }
        message.success('操作成功！')
        getList()
      })
      .catch((error) => {
        message.error(error.msg)
      
      })
  }

  const handleEdit = (row) => {
    adminFormEle.value.init(row)
  }
  const adminPasswordEle = ref(null)
  const handleEditPassword = (row) => {
    adminPasswordEle.value.init(row)
  }
  const adminReload = () => {
    getList()
  }
  const reLoad=()=>{
    pagination.current = 1
    getList()
  }
  const isFetching = ref(false)
  onMounted(() => {
    getList()
  })
</script>
